<template>
  <div>
    <!-- 设置 -->
    <el-dropdown @command="handleCommand">
      <!--      <span class="avatar-dropdown">-->
      <!--        <i class="el-icon-setting" />-->
      <!--      </span>-->
      <span class="avatar-dropdown">
        <img
          class="user-avatar"
          :src="imgUrl || manIcon"
          alt=""
        >
        <div class="user-name">
          {{ username }}
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
      </span>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          class="dropdown-class"
          @click.native="dialogData.show = true"
        >
          <i class="el-icon-lock" href="/stl/warehouse" />
          修改密码
        </el-dropdown-item>
        <el-dropdown-item class="dropdown-class" command="logout">
          <i class="el-icon-switch-button" />
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!--修改密码界面-->
    <cs-dialog :dialog="dialogData" @onSubmit="onSubmit">
      <div slot="content">
        <el-row type="flex" justify="center">
          <el-col :span="20">
            <el-form
              ref="dataForm"
              :model="dataForm"
              label-width="80px"
              :rules="dataFormRules"
              size="small"
              label-position="right"
            >
              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="dataForm.newPassword"
                  placeholder="请输入新密码"
                  auto-complete="off"
                  show-password
                />
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="dataForm.confirmPassword"
                  placeholder="请输入确认密码"
                  auto-complete="off"
                  show-password
                />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

      </div>
      <div slot="footer" />
    </cs-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { changePassword } from '@/api/base/user'
import Man from '@/assets/avatar/man.png'
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { isUrl } from '@/utils/validate'
// import { queryDictionary } from '@/api/system'
export default {
  name: 'VabAvatar',
  filters: {
    checkName(val) {
      if (val && val.length > 6) {
        return `${val.substring(0, 1)}**${val.substring(val.length - 1)}`
      } else {
        return val
      }
    }
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.dataForm.newPassword !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      manIcon: Man,
      // 初始化数据
      dataForm: {
        newPassword: ''
      },
      dataFormRules: {
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      },
      dialogData: {
        show: false,
        appendToBody: true,
        height: 400,
        width: '50%',
        title: {
          title: '修改密码'
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username'
    }),
    imgUrl() {
      if (this.avatar) {
        if (isUrl(this.avatar)) {
          return this.avatar
        } else {
          return `${baseURL}${commonDownloadFile}${this.avatar}`
        }
      } else {
        return ''
      }
    }
  },
  // mounted() {
  //   queryDictionary({ list: [] }).then(res => {
  //     for (const dataKey in res.data) {
  //       const dic = res.data[dataKey]
  //       dic?.forEach(item => {
  //         sessionStorage.setItem(dataKey, JSON.stringify(item.child))
  //       })
  //     }
  //     // console.log('res-data', res.data,)
  //   })
  // },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'logout':
          this.logout()
          break
      }
    },
    logout() {
      this.$baseConfirm(
        '您确定要退出吗?',
        null,
        async() => {
          await this.$store.dispatch('user/logout')
        }
      )
    },
    onSubmit(callback) {
      const _this = this
      this.$refs.dataForm.validate(async(valid) => {
        if (valid) {
          await changePassword({
            password: this.dataForm.newPassword
          })
          _this.$baseMessage.success('修改成功！请重新登录')
          await _this.$store.dispatch('user/logout')
          callback(true)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-dropdown {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 50px;
  padding: 0;
  margin-right: 30px;
  cursor: pointer;
  .user-avatar {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 50%;
  }

  .user-name {
    position: relative;
    margin-left: 5px;
    cursor: pointer;
    color: $base-title-color;
  }
}
::v-deep .el-dropdown-menu__item {
  font-size: 16px;
  padding: 5px 15px;
}
</style>
